<template>
	<uv-overlay :show="item.show" v-for="(item,index) in dialogData" :key="index">
		<view class="curtain-container" >
			<view class="curtain-content">
				<image class="curtain-image" :src="item.picUrl" mode="widthFix" @click="handleCurtain(item)" />

				<view class="close-btn">
					<image src="https://static.tianwandailian.cn/static/server/newimage/register/close-icon.png" mode="" class="close-img" @click.stop="handleClose(item)">
					</image>
				</view>
			</view>
		</view>
	</uv-overlay>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		GetNotLoginCurtainList,
		GetLoginCurtainList
	} from '@/api/modules/system'

	import useStore from '@/stores'

	const {
		globalStore
	} = useStore()

	const dialogData = ref([])

	const emits = defineEmits(['openPack'])

	// 初始化加载
	onMounted(async () => {
		await createBlackList()
		await getDialogData()
	})

	// 创建黑名单。列表
	const createBlackList = async () => {
		if (uni.getStorageSync('BLACK_DIALOG')) return
		uni.setStorageSync('BLACK_DIALOG', {
			permanent: [],
			toDay: [],
		});
	}

	// 已登录 
	const loginSuccess = async () => {
		const res = await GetLoginCurtainList()

		if (res.code === 0) {
			if (res.data.length > 0) {
				// 返回 当前登录状态下的当前数据
				dialogData.value = res.data.map(item => {
					return {
						...item,
						show: false
					}
				})

				// 如果data[0].registerGifts === 1 则是开启注册礼包
				if (dialogData.value[0].registerGifts && dialogData.value[0].registerGifts === 1) {
					emits('openPack')
				} else {
					dialogData.value[0].show = true
				}
			}
		}
	}

	// 未登录
	const loginNot = async () => {
		const res = await GetNotLoginCurtainList()

		if (res.code === 0) {

			// 返回 当前登录状态下的当前数据
			dialogData.value = res.data.map(item => {
				return {
					...item,
					show: false
				}
			})

			// 循环 
			dialogData.value.forEach(async (item) => {
				// 黑名单获取
				const black_dialog = uni.getStorageSync('BLACK_DIALOG')
				console.log(black_dialog)

				// 如果是只弹一次
				if (item.frequency === 1 && !black_dialog.permanent.includes(item.id)) {
					item.show = true
					// 存储黑名单 永久不在弹出当前id的弹窗
					black_dialog.permanent.push(item.id)
					uni.setStorageSync('BLACK_DIALOG', black_dialog);
				}

				if (item.frequency === 2 && await checkTime(item, black_dialog.toDay) &&
					await checkTimeInterval(item)) {
					item.show = true
					// 拿到当前匹配id的那条数数据 去更改时间
					if (black_dialog.toDay.length > 0) {
						black_dialog.toDay.forEach(day => {
							if (day.id === item.id) {
								day.time = Date.now() // 更新时间
							}
						})
					} else {
						black_dialog.toDay.push({
							id: item.id,
							time: Date.now()
						})
					}
					uni.setStorageSync('BLACK_DIALOG', black_dialog);
				}
			})
		}
	}

	const getDialogData = async () => {
		if (globalStore.token) {
			await loginSuccess()
		} else {
			await loginNot()
		}
	}

	// 关闭当前弹窗
	const handleClose = async (item) => {
		item.show = false
	}

	// 跳转
	const handleCurtain = async (item) => {
		if (item.redirectUrl) {
			item.show = false
			uni.navigateTo({
				url: item.redirectUrl
			})
		}
	}

	// 时间校验
	const checkTime = async (item, toDay) => {
		// 拿到当前黑名单数据
		const prevItem = toDay.find(day => day.id === item.id)
		// 存在 去判断时间
		if (prevItem) {
			// 判断时间
			const oneDayMs = 24 * 60 * 60 * 1000;
			const tenSecMs = 10 * 1000;
			const prevDayCount = Math.floor(prevItem.time / oneDayMs);
			const nowDayCount = Math.floor(Date.now() / oneDayMs);
			console.log(nowDayCount, prevDayCount)
			console.log(nowDayCount > prevDayCount)
			return nowDayCount > prevDayCount
		}

		return true
	}

	// 时间区间校验
	const checkTimeInterval = async (item) => {
		const now = new Date();
		// 检查有效期
		const startTime = new Date(item.validStartTime);
		const endTime = new Date(item.validEndTime);

		if (now < startTime || now > endTime) {
			return false;
		}
		return true; // 其他频率类型默认显示
	}
</script>

<style lang="scss" scoped>
	.curtain-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: relative;

		.curtain-content {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.curtain-image {
				position: relative;
				z-index: 1;
				background-size: 100% 100%;
			}

			.close-btn {
				position: absolute;
				bottom: -100rpx;
				border-radius: 50%;

				.close-img {
					width: 60rpx;
					height: 60rpx;
					background-size: contain;
				}
			}
		}
	}
</style>